<template>
  <div>
    <!--修改密码界面-->
    <el-dialog
        :title="dialogTitle"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="closeDialog"
        :visible.sync="showUpdatePwd"
        width="30%">

      <el-steps :active="stepActive">
        <el-step title="步骤 1" description="输入邮箱"></el-step>
        <el-step title="步骤 2" description="输入验证码"></el-step>
        <el-step title="步骤 3" description="确定新的密码"></el-step>
      </el-steps>

      <el-input v-model="inputEmail" placeholder="请输入邮箱"
                :disabled="!isChangePwd"
                class="stepInput" v-if="stepActive === 1"></el-input>
      <el-input v-model="inputCode" placeholder="请输入对应的验证码"
                class="stepInput" v-if="stepActive === 2"></el-input>
      <el-input v-model="inputPassword"
                placeholder="请输入新的密码"
                show-password
                class="stepInput" v-if="stepActive === 3"></el-input>
      <el-button @click="sendEmail" v-if="stepActive === 1"
                 :disabled="sendButton">发送验证码</el-button>
      <el-button @click="checkCode" v-if="stepActive === 2">下一步</el-button>
      <el-button @click="updPassword" v-if="stepActive === 3">确定修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { Steps, Step,Input,Button} from 'element-ui';
import loginUtils from '../../plugins/login'
import  pubsub from 'pubsub-js'
export default {
  name: "changePwd",
  components:{
    Steps,
    Step,
    Input,
    Button,
  },
  data(){
    return{
      showUpdatePwd: true, //是否展示密码修改界面
      inputCode: '', //用户输入的验证码
      inputPassword: '', //用户输入的新密码
      stepActive: 1,
      isChangePwd: false, //是不是修改密码页面
      inputEmail: '', //用户输入的邮箱
      dialogTitle: '', //弹窗标题
      sendButton: false, //按钮是否可以点击
    }
  },
  methods:{
    //修改密码
    updPassword() {
      let updData = this.$qs.stringify({
        password: this.inputPassword,
        userid: this.$store.state.userContext.userid.length>0?this.$store.state.userContext.userid:null,
        userEmail: this.inputEmail
      })
      this.$axios({
        url: '/noteUser/updUser',
        method: 'PUT',
        data: updData
      }).then(response => {
        if (response.data.noteCode === 200) {
          //发送成功提示用户成功消息
          this.$message({
            message: response.data.noteMessage,
            type: 'success'
          })
          //关闭窗口退出登陆
          this.showUpdatePwd = false;
          //清除cookie
          this.clearCookie();
          //跳回登陆界面
          this.$router.push("/login");
          this.$store.commit("setUserContext", {}) //提交控对象到全局
        }
      }).catch(error => {
        console.log(error);
      })
    },
    //发送验证码
    sendEmail() {
      //用户邮箱地址不为空 就获取验证码
      let re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if (this.inputEmail !== '') {
        //通过正则表达式判断邮箱是否合法
        if (re.test(this.inputEmail)) {
          if (this.isChangePwd){
            this.inChangePwd()
          }
          else{
            this.inHome()
          }
        }else{
          this.$message.error("请填写正确的邮箱～")
        }
      }else{
        this.$message.error("邮箱地址不能为空～")
      }

    },
    //在修改界面修改密码
    inChangePwd(){
      this.sendButton = true;
      this.$axios({
        url: '/noteUser/findPassword/' + this.inputEmail,
        method: 'GET',
      }).then(response => {
        console.log(response.data);
        if (response.data.noteCode === 200) {
          //发送成功提示用户成功消息
          this.$message({
            message: response.data.noteMessage,
            type: 'success'
          })
          //到下一步
          this.stepActive++;
          this.sendButton = false;
        } else {
          this.noUserEmail(response.data.noteMessage)
          this.sendButton = false;
        }
      }).catch(error => {
        this.$message.error('服务层错误....')
        this.sendButton = false;
      })
    },
    //在主页修改密码
    inHome(){
      this.sendButton = true;
      this.$axios({
        url: '/noteUser/sendCode/' + this.inputEmail+'&'+true,
        method: 'GET',
      }).then(response => {
        console.log(response.data);
        if (response.data.noteCode === 200) {
          //发送成功提示用户成功消息
          this.$message({
            message: response.data.noteMessage,
            type: 'success'
          })
          //到下一步
          this.stepActive++;
          this.sendButton = false;
        } else {
          this.sendButton = false;
          this.$message.error(response.data.noteMessage)
        }
      }).catch(error => {
        this.$message.error('服务层错误....')
        this.sendButton = false;
      })
    },
    //检查验证码是否合法
    checkCode() {
      let checkCodeData = this.$qs.stringify({
        email: this.inputEmail,
        code: this.inputCode,
      })
      this.$axios({
        url: '/noteUser/checkEmail',
        method: 'POST',
        data: checkCodeData,
      }).then(response => {
        if (response.data.noteCode === 200) {
          //发送成功提示用户成功消息
          this.$message({
            message: response.data.noteMessage,
            type: 'success'
          })
          //到下一步
          this.stepActive++;
        } else {
          this.$message.error("验证码输入错误！！")
        }
      }).catch(error => {
        this.$message.error('服务层错误....')
      })
    },
    //检查页面
    checkPage(){
      if (this.$route.fullPath === "/ChangePassword" || this.$route.fullPath === "/changePassword"){
        this.isChangePwd = true
        this.dialogTitle = '找回密码'
      }else{
        this.isChangePwd = false
        this.dialogTitle = '修改密码'
        this.inputEmail = this.$store.state.userContext.userEmail
      }
    },
    //关闭弹窗
    closeDialog(){
      this.stepActive=1
      if (this.isChangePwd)
        this.$router.push("/login")
      else
        pubsub.publishSync("closeDialog",false);
    },
    //没有注册
    noUserEmail(message){
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$router.push("/singIn") //前往注册界面
      }).catch(() => {
        this.$router.push("/login") //前往登陆界面
      });
    },
    //清空cookie
    clearCookie(){
      loginUtils.clearCookie();
    }
  },
  mounted() {
    console.log(this.$store.state.userContext.userid.length);
    this.checkPage();
  }
}
</script>

<style scoped>
.stepInput {
  margin-top: 8%;
  margin-bottom: 8%;
}
</style>
